<template>
	<view class="container" :style="{background}">
		<view class="tmt-header">
			<view class="p20" @click="changMonth(-1)">
				<image src="../../../../static/phone/data_toleft.png" style="width: 12rpx;height: 24rpx;"></image>
			</view>
		
		
			<picker mode="date" fields="month"  @change="bindDateChange">
				<text class="p30" >
					{{ `${currentYearMonth.year}年${currentYearMonth.month>=10?currentYearMonth.month:'0'+currentYearMonth.month}月` }}
				</text>
			</picker>
										
			<view class="p20" @click="changMonth(1)">
				<image src="../../../../static/phone/data_toright.png" style="width: 12rpx;height: 24rpx;"></image>
			</view>
			
			<view style="display: flex;align-items: center;margin-left: auto;" @click="sift" v-if="showSift">
				<text class="ttext1" style="margin-left: 32rpx;">筛选</text>
				<image src="../../../../static/select.png"
					style="width: 32rpx;height: 32rpx;margin-left: 4rpx;margin-right: 32rpx;"></image>
			</view>
			
		</view>
		<view class="tmt-content">
			<view class="tmt-week-wrap" >
				<view class="cell week-item" style="height: 42rpx;" :style="{color:weekColor}" v-for="(item,index) in week" :key="index">{{ item.label }}</view>
			</view>
			<view class="tmt-day-wrap" :style="[{height:unfold ?contentHeight:'68rpx'},{color:dayColor}]">
				<view class="cell" v-for="index of blankDay"></view>
				<view class="cell" v-for="(item,index) in daysArr" @click="changeDay(item)">
					<view
						v-if="!item.today"
						class="dayText"
                        :style="(current.year==item.year && current.month==item.month && current.day==item.day)?'background:'+selectBg:''"
                        >
						<text  :style="(current.year==item.year && current.month==item.month && current.day==item.day)?'color:'+selectColor:''">
							{{item.day }}
						</text>
                        <view class="point" v-if="item.point"></view>
					</view>
					
					<view
						v-if="item.today"
						class="dayText2"
					    :style="(current.year==item.year && current.month==item.month && current.day==item.day)?'background:'+selectBg:''"
					    >
						<text  :style="(current.year==item.year && current.month==item.month && current.day==item.day)?'color:'+selectColor:''">
							{{item.day }}
						</text>
					    <view class="point" v-if="item.point"></view>
					</view>
					
				</view>
			</view>
		</view>
		<view v-if="showBtn" class="tmt-footer" @click="showFold">
			<image src="../../../../static/phone/data_close.png" style="width: 24rpx;height: 12rpx;" v-if="unfold"></image>
			<image src="../../../../static/phone/data_open.png" style="width: 24rpx;height: 12rpx;" v-if="!unfold"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "calendar",
		data() {
			return {
				unfold: true,
				week: [{
						label: '一',
						value: 1
					},
					{
						label: '二',
						value: 2
					},
					{
						label: '三',
						value: 3
					},
					{
						label: '四',
						value: 4
					},
					{
						label: '五',
						value: 5
					},
					{
						label: '六',
						value: 6
					},
					{
						label: '日',
						value: 7
					},
				],
				blankDay: 0, //空白天数
				today: {}, //当天
				current: {}, //当前的年月
				daysArr: [],
				list: [], //需要下标的日期
				currentYearMonth: {}, //当前年月
				
				data12:''
			};
		},
		computed: {
			contentHeight() {
				let height = Math.ceil((this.blankDay + this.daysArr.length) / 7) * 88
				return height + 'rpx'
			}
		},
		props: {
			pointList: {
				type: Array,
				default () {
					return []
				}
			},
			defaultDate: {
				type: String,
				default () {
					return ''
				}
			},
			showBtn: {
				type: Boolean,
				default () {
					return true
				}
			},
			show: {
				type: Boolean,
				default () {
					return true
				}
			},
			showSift:{//显示筛选按钮
				type: Boolean,
				default () {
					return false
				}
			},
			background: {
				type: String,
				default () {
					return 'linear-gradient(45deg, #ffffff 0%, #ffffff 100%)'
				}
			},
			weekColor: {
				type: String,
				default () {
					return '#666'
				}
			},
			dayColor: {
				type: String,
				default () {
					return '#333'
				}
			},
            selectBg:{
				type: String,
				default () {
					return '#2DA9C5'
				}
            },
			selectColor:{
				type: String,
				default () {
					return '#ffffff'
				}
			},
            pointColor:{
				type: String,
				default () {
					return '#fff'
				}
            },
		},
		created() {
			this.unfold = this.show
			// this.list = this.pointList
			// this.fomatePointTime()
			this.init(this.defaultDate == '')
		},
		methods: {
			initData(year,month){
				let _this = this
				_this.list = _this.pointList
				_this.fomatePointTime()
				for (var i = 0; i < _this.daysArr.length; i++) {
					let point = _this.list.findIndex(item => {
						return item == String(year) + String(month) + String(i)
					}) != -1
					_this.daysArr[i]['point'] = point
				}
			},
			showFold(){
				this.unfold = !this.unfold
				this.$emit('showFold',this.unfold)
			},
			changMonth(num) {
				const {
					year,
					month
				} = this.getMonthYear(num)
				this.makeCalendar(year, month)
				
			},
			
			bindDateChange(val){
				console.log('日期选择',val)
				const years = val.detail.value.split('-')[0]
				const months = val.detail.value.split('-')[1]
				
				this.currentYearMonth = {
					year:Number.parseInt(years),
					month:Number.parseInt(months)
				}
				
				this.makeCalendar(Number.parseInt(years),Number.parseInt(months))
			},
			
			// 获取前几个月,未来几个月的年份和月份
			getMonthYear(num) {
				let month = this.currentYearMonth.month
				let year = this.currentYearMonth.year
				let year2 = year
				let month2 = month + num
				if (month + num <= 0) {
					// 之前年份
					year2 = year - 1 - parseInt(Math.abs(month2) / 12)
					month2 = 12 - (Math.abs(month2) % 12)
				} else if ((month2 / 12) > 1) {
					// 之后年份
					year2 = year + (month2 % 12 == 0 ? 0 : parseInt(month2 / 12))
					month2 = parseInt(month2 % 12) == 0 ? 12 : parseInt(month2 % 12)
				}
				return {
					year: year2,
					month: month2
				}
			},
			changeDay(item) {
				this.current = item
				let {year,month,day} = item
				this.$emit('changeDate',{year,month,day})
			},
			// 获取某年某月的天数
			getDays(year, month) {
				let now = new Date(year, month, 0)
				return now.getDate()
			},
			//获取某一天为星期几
			getWeekByDay(time) {
				let day = new Date(Date.parse(time.replace(/-/g, '/'))); //将日期值格式化
				return day.getDay() == 0 ? 7 : day.getDay();
			},
			init(nowTime) {
				let setTime = nowTime ? new Date() : new Date(this.defaultDate)
				let year = setTime.getFullYear()
				let month = setTime.getMonth() + 1
				let day = setTime.getDate()
				if(!(this.defaultDate!='' && nowTime) ){
					this.current = {
						year,
						month,
						day,
					}
				}
				this.today = {
					year: new Date().getFullYear(),
					month: new Date().getMonth() + 1,
					day: new Date().getDate()
				}
				this.makeCalendar(year, month)
			},
			fomatePointTime(year,month,list) {
				let _this = this
				let pointList = []
				// console.log('_this.pointList---',pointList)
				pointList = list.map(item => {
					item = item.replace(/-/g, '/') //期值格式化
					let timeArr = item.split('/')
					let timeStr = ''
					timeArr.map(time => {
						time = parseInt(time)
						timeStr += time
						return time
					})
					return timeStr
				})
				let days = this.getDays(year, month) //当月天数
				let daysArr = _this.daysArr
				for (var i = 1; i <= days; i++) {
					let point = pointList.findIndex(item => {
						return item == String(year) + String(month) + String(i)
					}) != -1
					daysArr[i-1]['point'] = point
				}
				_this.daysArr = daysArr
				_this.$forceUpdate()
				// console.log('_this.daysArr2222222',_this.daysArr)
				
				
			},
			makeCalendar(year, month) {
				let today = this.today
				let days = this.getDays(year, month) //当月天数
                // console.log(days)
				let firstDayWeek = this.getWeekByDay(`${year}-${month}-1`) //获取每个月第一天的星期
				let weekIndex = this.week.findIndex(item => {
					return item.value == firstDayWeek
				})
				let daysArr = []
				for (let i = 1; i <= days; i++) {
					// let point = this.list.findIndex(item => {
					// 	return item == String(year) + String(month) + String(i)
					// }) != -1
					daysArr.push({
						year,
						month,
						day: i,
						// point,
						today: year == today.year && month == today.month && i == today.day
					})
				}
				this.currentYearMonth = {
					year,
					month
				}
				this.daysArr = daysArr
				console.log('daysArr---',this.daysArr)
				this.blankDay = weekIndex == -1 ? 0 : weekIndex
				
				this.$emit('currentYearMonth',{year,month})
			},
			
			/**
			 * 点击了筛选
			 */
			sift(){
				this.$emit('sift')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.p20 {
		width: 88rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.p30{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	
	.ttext1 {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.container {
		// padding: 0 20upx;
	}

	.tmt-header {
		display: flex;
		align-items: center;
		height: 88rpx;
	}

	.cell {
		width: 14.28%;
		height: 68rpx;
		text-align: center;
		// line-height: 88upx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.point {
			width: 8rpx;
			height: 8rpx;
			background: #FF6132;
			border-radius: 8rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}

		.dayText {
			width: 48rpx;
			height: 48rpx;
			text-align: center;
			font-size: 32rpx;
			border-radius: 48rpx;
			
			&.on {
				background: linear-gradient(180deg, #FF855E 0%, #ED6337 100%);
			}
		}
		.dayText2 {
			width: 48rpx;
			height: 48rpx;
			text-align: center;
			font-size: 32rpx;
			border-radius: 48rpx;
			color: #2DA9C5;
			background-color: #E8F7FB;;
			
			&.on {
				background: linear-gradient(180deg, #FF855E 0%, #ED6337 100%);
			}
		}

	}

	.tmt-content {
		.tmt-week-wrap {
			display: flex;

			.week-item {
				font-size: 24rpx;
				
			}
		}

		.tmt-day-wrap {
			display: flex;
			flex-wrap: wrap;
			transition: height .3s;
			overflow: hidden;
		}
	}

	.tmt-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50rpx;
		margin-top: -24rpx;
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.0500);
	}
	
	
</style>
